<template>
	<view class="cardDetail">
		<view class="cardHead">
			<view class="info">
				<view class="time">2024-12-31 16:51:00</view>
				<view class="desc">
					<view class="text">余额</view>
					<view class="money">{{detail.storage_balance}}</view>
				</view>
			</view>
			<view class="num">NO.{{detail.card_num}}</view>
		</view>
		<view class="content">
			<view class="statusBar">
				<view class="str" :class="active?'':'active'" @click="setStu(0)">消费明细</view>
				<view class="str" :class="!active?'':'active'" @click="setStu(1)">适用门店</view>
			</view>
			<view class="detail" v-if="!active">
				<view class="title">明细</view>
				<view class="list-item" v-for="l in list" :key="l.id">
					<view class="left">
						<view class="name">{{getText(l.action_type)}}</view>
						<view class="time">2020-08-27</view>
					</view>
					<view class="right" :class="l.action_type==2?'green':'red'"><text v-if="l.action_type==2">-</text><text v-if="l.action_type!=2">+</text>{{l.sum}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id:'',
				detail:{},
				pageIndex:1,
				pageIndex2:1,
				active:0,
				list:[],
				actionTypes:[
					{1:'充值'},
					{2:'消费'},
					{3:'消费退款'},
					{4:'充值退款'},
					{99:'会员导入期初有余额'},
					{7:'调整单调整正向'},
					{8:'调整单调整负向'},
					{10:'零售退货充值'},
					{100:'会员售出'},
				]
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getData()
			this.getList()
		},
		methods: {
			getData(){
				let that = this
				let data = {
				
					"conditions": [{
						"name": "card_num",
						"value1":this.id,
						"type": "string",
						"op": "eq"
					}],
					"pager": {
						"pageIndex": this.pageIndex,
						"pageSize": 10,
					},
					"orders": [{
						"name": "member_id",
						"order": "desc"
					}]
				}
				this.$Request.post4(
					this.$api.httpApi.user.queryValidCard, data
				).then(res => {
					console.log(res)
					this.detail = res.data[0]
					
				});
			},
			getList(){
				let data = {
				
					"conditions": [{
						"name": "card_num",
						"value1":this.id,
						"type": "string",
						"op": "eq"
					}],
					"pager": {
						"pageIndex": this.pageIndex2,
						"pageSize": 10,
					},
					"orders": [{
						"name": "id",
						"order": "desc"
					}]
				}
				this.$Request.post4(
					this.$api.httpApi.user.querybills, data
				).then(res => {
					console.log(res)
					this.list = res.data
					
				});
				
			},
			setStu(str){
				this.active = str
			},
			getText(str){
				let a = ''
				this.actionTypes.forEach(item=>{
					if(item[str]){
						a = item[str]
					}
					
				})
				return a
				// return this.actionTypes
			}
		}
	}
</script>

<style scoped lang="less">
	.cardDetail{
		width: 95%;
		margin: auto;
		border-top: 1px solid #eee;
		.cardHead{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 330upx;
			margin-top: 10rpx;
			overflow: hidden;
			padding: 50upx;
			background: url('https://ylres.yonyoucloud.com/mm/images/memberships/storedvalue/card-1.png');
			background-size: 100% auto;
			.info{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time{
					color: #fff;
					opacity: 0.5;
					font-size: 22upx;
				}
				.desc{
					color: #fff;
					text-align: right;
					font-size: 32upx;
					
					.text{
						font-size: 22upx;
						opacity: 0.5;
					}
					.money{
						font-family: DINCondensed-Bold;
					}
				}
			}
			.num{
				margin-top: 20upx;
				color: #fff;
				font-size: 34upx;
				font-family: DINCondensed-Bold;
			}
		}
		.content{
			margin-top: 30upx;
			.statusBar{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.str{
					color: #999;
					text-align: center;
					padding-bottom: 10upx;
					border-bottom: 1upx solid #fff;
					&.active{
						color: #ff3735;
						border-bottom: 1upx solid #ff3735;
					}
					// text{
					// 	width: 20upx;
					// 	border-top: 1upx solid #ff3735;
					// 	height: 2upx;
					// }
				}
			}
			.detail{
				margin-top: 30upx;
				.title{
					font-size: 26upx;
					color: #999;
					margin: 13upx 0;
				}
				.list-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30upx;
					.left{
						.name{
							color: #333;
							font-size: 30upx;
						}
						.time{
							color: #999;
							font-size: 26upx;
							margin-top: 5upx;
						}
					}
					.right{
						color: #ee2223;
						font-size: 46upx;
						&.green{
							color: #20c00f;
						}
					}
				}
			}
		}
	}
</style>
